<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*** Created by lovo_bdk on 15-12-17. */ !(function (win, doc) {
            function setFontSize() {
                var winWidth = window.innerWidth;
                doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
            }
            var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
            var timer = null;
            win.addEventListener(evt, function () {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
            win.addEventListener("pageshow", function (e) {
                if (e.persisted) {
                    clearTimeout(timer);
                    timer = setTimeout(setFontSize, 300);
                }
            }, false);
            //初始化 
            setFontSize();
        }(window, document));
    </script>
    <style>
        .recommend {
            width: 10.05rem;
            height: 31.04rem;
            margin: auto;
            margin-top: .24rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            flex-wrap: wrap;

            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .recommend .recommend-left {
            width: 4.86rem;
            height: 7.76rem;
            background-color: white;
            border-radius: .2rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .recommend .recommend-left img {
            width: 100%;
        }

        .recommend .recommend-left> :nth-child(2) {
            font-size: .38rem;
            width: 3.9rem;
        }

        .recommend .recommend-left .recommend-left-bottom {
            width: 4.15rem;
            height: .5rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-bottom: .6rem;
        }

        .recommend .recommend-left .recommend-left-bottom> :nth-child(1) {
            font-size: .4rem;
            color: #ee5b00;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            height: .5rem;
        }

        .recommend .recommend-left .recommend-left-bottom> :nth-child(1) span {
            font-size: .24rem;
            margin-top: .2rem;
        }

        .recommend .recommend-left .recommend-left-bottom> :nth-child(2) {
            font-size: .24rem;
            width: 0.8rem;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
            color: #e3513d;
            border: #e3513d solid .01rem;
            border-radius: .08rem;
        }

        .recommend .recommend-left .recommend-left-bottom> :nth-child(3) {
            font-size: .24rem;
            width: 1.15rem;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
            color: #a6a6a6;
            border: #a6a6a6 solid .01rem;
            border-radius: .2rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <h6>你选择的是{{ msg }}</h6>
        <div class="recommend">
            <div v-for="(item,index) in arr" :key="index">
                <head-cpn :item="item" @add="add"></head-cpn>
            </div>
        </div>
    </div>
    </div>
    <script src="../js/vue.js"></script>
    <template id="boxCpn">
        <div class="recommend-left" @click="changeData()">
            <img :src="item.src" alt="">
            <p>{{ item.text }}</p>
            <div class="recommend-left-bottom">
                <p>{{ item.price }}<span>{{ item.rise }}</span></p>
                <p>{{ item.update }}</p>
                <p>{{ item.similar }}</p>
            </div>
        </div>
    </template>
    <script>
        Vue.config.productionTip = false;

        const app = new Vue({
            el: '#app',
            data() {
                return {
                    arr: [
                        {
                            src: './APP图片/7f5fab059643521e41406131379c7b4a.jpg',
                            text: '小米11 Ultra,开启影像新时代',
                            price: '¥5999',
                            rise: '起',
                            update: '上新',
                            similar: '看相似',
                        },
                        {
                            src: "./APP图片/pms_1599531818.37487338.png",
                            text: '智能定时|用电统计|过载保护',
                            price: '¥49',
                            rise: '',
                            update: '',
                            similar: '看相似',
                        },
                        {
                            src: "./APP图片/pms_1593339346.09992308.jpg",
                            text: '小身材也有大智慧',
                            price: '¥49',
                            rise: '',
                            update: '包邮',
                            similar: '看相似',
                        },
                        {
                            src: "./APP图片/d3a36269683536a9d46a044392ed37ab.png",
                            text: 'Redmi Note 9 4G,6000mAh大电量,..',
                            price: '¥999',
                            rise: '起',
                            update: '满减',
                            similar: '看相似',
                        },
                        {
                            src: "./APP图片/刮胡刀.jpg",
                            text: '青年"无须"新选择',
                            price: '¥99',
                            rise: '',
                            update: '',
                            similar: '看相似',
                        },
                        {
                            src: "./APP图片/手表.webp",
                            text: '全面屏更多可能',
                            price: '¥299',
                            rise: '起',
                            update: '上新',
                            similar: '看相似',
                        },
                        {
                            src: "./APP图片/S%FIRBD~TN}O(RBNN_ZO_R0.png",
                            text: '5号彩虹电池(10粒)，无汞无镉安...',
                            price: '¥9.9',
                            rise: '',
                            update: '',
                            similar: '看相似',
                        },
                        {
                            src: "./APP图片/pms_1602558654.78438981.jpg",
                            text: '支持蓝牙5.0，自动秒连,拿起就能用',
                            price: '¥99',
                            rise: '',
                            update: '',
                            similar: '看相似',
                        },
                    ],
                    msg: '',
                }
            },
            components: {
                'head-cpn': {
                    template: '#boxCpn',
                    data() {
                        return {

                        }
                    },
                    props: ['item'],
                    methods: {
                        changeData() {
                            // console.log(this.item.text);
                            this.$emit("add", this.item.text)
                        }
                    }
                }

            },
            methods: {
                add(val) {
                    console.log(val);   
                    this.msg = val;
                }
            }

        })
    </script>
</body>
</html>